<template>
  <div class="contentBox">

    <el-row type="flex" justify="space-around">
      <el-col class="col01" :span="16" style="margin-right: 20px">
        <!-- 订单折线图 -->
        <order-count />
      </el-col>
      <el-col class="col01" :span="8">
        <!-- 系统公告 -->
        <div class="h2Ttl">
          <i class="el-icon-message-solid" style="color: rgb(255, 156, 110); margin-right: 10px"></i>系统公告
        </div>
        <div>
          <el-table :data="noticeList" :show-header="false" empty-text="暂无公告">
            <el-table-column label="标题">
              <template slot-scope="scope">
                <i class="title-icon el-icon-info"></i>
                <span class="title-text" @click="openNotice(scope.row)">{{ scope.row.noticeTitle }}</span>
                <i class="new-text" v-if="newText(scope.row.createTime)">新！</i>
              </template>
            </el-table-column>
            <el-table-column label="时间" align="right" width="110">
              <template slot-scope="scope">
                <span style="margin-right: 10px;">{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 公告详情弹窗 -->
    <el-dialog :visible.sync="open" width="780px" append-to-body>
      <div>
        <div style="text-align: center;">
          <h2>{{ noticeInfo.noticeTitle }}</h2>
        </div>
        <div style="text-align: right;">{{ parseTime(noticeInfo.createTime, '{y}-{m}-{d}') }}</div>
        <div style="margin-top: 10px;">
          <editor v-model="noticeInfo.noticeContent" :readOnly="true" :min-height="192" />
        </div>
      </div>
      <div slot="footer">
        <el-button @click="open=false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { listNotice, getNotice } from '@/api/system/notice';
import { getNowDate, dateFormat } from '@/utils/date';
import OrderCount from './OrderCount';

export default {
  components: {
    OrderCount
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      open: false,
      nowDate: null,
      noticeInfo: {},
      noticeList: []
    }
  },
  computed: {
    ...mapGetters([
      'wsMsg'
    ]),
    // 判断是否是当天的消息
    newText(val) {
      return function(val) {
        if(val) {
          let d = dateFormat(new Date(val), 'yyyy-MM-dd');
          if(d == this.nowDate) {
            return true;
          }
        }
        return false;
      }
    }
  },
  watch: {
    // websocket实现实时刷新系统公告
    wsMsg: function(newData, oldData) {
      if(newData && newData == this.$store.state.constants.ws_msg_type_refreshNotice) {
        this.getNotice();
      }
    }
  },
  created() {
    this.getNotice();
  },
  methods: {
    // 查询系统公告
    getNotice() {
      this.nowDate = getNowDate();
      listNotice(this.queryParams).then(res => {
        if(res.code == 200) {
          this.noticeList = res.rows;
        }
      })
    },
    // 公告详情
    openNotice(row) {
      let that = this;
      getNotice(row.noticeId).then(res => {
        if(res.data) {
          that.noticeInfo = res.data;
          that.open = true;
        } else {
          that.getNotice();
        }
      })
    }
  }
}
</script>

<style>
  .col01 {
    /*padding: 15px;*/
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .h2Ttl {
    margin-bottom: 20px;
    text-align: left;
    font-size: 22px;
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf5;
  }
  .el-collapse {
    border-top: none;
  }
  .el-collapse-item__header {
    font-size: 16px;
    margin: 0 20px;
  }
  .el-collapse-item__wrap {
    padding: 15px 20px;
    background-color: #f9f9f9;
  }
  .el-collapse-item__content {
    font-size: 14px;
    padding: 0 20px;
  }
  .title-icon {
    margin: -3px 10px 0 10px;
    color: rgb(255, 156, 110);
  }
  .title-text:hover {
    cursor: pointer;
    color: #409eff;
  }
  .new-text {
    margin-left: 30px;
    color: red;
  }
</style>
